<template>
  <UseDraggable v-if="isExist"
                @pointerdown="topModalName='board'"
                class="resize overflow-auto fixed bg-white dark:bg-black h-[500px] w-[550px] rounded-lg border border-gray-500 drop-shadow"
                :class="[topModalName==='board'?'z-[100]':'z-[90]',boardModalStatus==='hidden'?'transition-all duration-1000 ease-in-out translate-x-[4000px] opacity-0':'']"
                :handle="handle"
                :initial-value="{ x: width-750, y: 75 }">
    <div class="flex flex-col h-full">
      <div ref="handle" class="cursor-move flex justify-between items-center border-b">
        <div class="flex">
          <h3 class="truncate hidden sm:block px-1">简易白板</h3>
          <div class="flex border-x-2  px-3">
            <n-button-group>
              <n-button text :disabled="!canUndo" @click="undo()">
                <TextIcon tip="撤销" icon="material-symbols:undo" :size="25"></TextIcon>
              </n-button>
              <n-button text :disabled="!canRedo" @click="redo()">
                <TextIcon tip="回退" icon="material-symbols:redo" :size="25"></TextIcon>
              </n-button>
              <n-button text @click="clear()">
                <TextIcon tip="清除" icon="ant-design:clear-outlined" :size="25"></TextIcon>
              </n-button>
            </n-button-group>
          </div>
          <div class="flex border-x-2 space-x-1 px-1">
            <n-button-group>
              <n-button text @click="mode = 'draw'">
                <TextIcon tip="画笔" icon="mdi:pen" :size="25"></TextIcon>
              </n-button>

              <n-button text @click="mode = 'line'">
                <TextIcon tip="画线" icon="uil:line-alt" :size="25"></TextIcon>
              </n-button>
              <n-button text @click="mode = 'rectangle'">
                <TextIcon tip="矩形" icon="material-symbols:rectangle-outline" :size="25"></TextIcon>
              </n-button>
              <n-button text @click="mode = 'ellipse'">
                <TextIcon tip="画圆" icon="mdi:ellipse-outline" :size="25"></TextIcon>
              </n-button>
            </n-button-group>
          </div>
          <div class="flex items-center border-l-2 px-1 space-x-1 ">
            <n-button-group>
              <n-button circle
                        size="tiny"
                        secondary
                        v-for="(_color,index) in colors"
                        :key="index"
                        :style="{ background: _color }"
                        @click="() => color = _color">
              </n-button>
            </n-button-group>
          </div>
        </div>
        <div>
          <n-button-group>
            <n-button @click="handleHidden" quaternary>
              <TextIcon tip="最小化" icon="mingcute:minimize-fill"></TextIcon>
            </n-button>
            <n-button @click="handleClose" quaternary>
              <TextIcon tip="关闭" icon="mdi:close"></TextIcon>
            </n-button>
          </n-button-group>
        </div>
      </div>
      <div class="bg-green-500 overflow-hidden flex-1">
        <svg @pointerdown="topModalName='board'"
             ref="targetRef"
             class="w-full h-screen -mt-24 bg-white"/>
      </div>
    </div>

  </UseDraggable>

</template>

<script setup lang="ts">


import {computed} from "vue";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store/module/app";
import {UseDraggable} from '@vueuse/components'
import {ref} from 'vue'
import {toRefs} from '@vueuse/core'
import {useDrauu} from '@vueuse/integrations/useDrauu'
import TextIcon from "@/components/pc/icon/TextIcon.vue";


const {boardModalStatus, topModalName} = storeToRefs(useAppStore())
const targetRef = ref()
const colors = ref(['black', '#ef4444', '#22c55e', '#3b82f6'])
const {undo, redo, canUndo, canRedo, clear, brush} = useDrauu(targetRef, {
  brush: {
    color: 'black',
    size: 3,
  },
})
const {mode, color} = toRefs(brush)

const handle = ref<HTMLElement | null>(null)


import {useWindowSize} from '@vueuse/core'

const {width} = useWindowSize()

const handleClose = () => {
  boardModalStatus.value = 'none'
}

const handleHidden = () => {
  boardModalStatus.value = 'hidden'
}

const isExist = computed(() => {
  return boardModalStatus.value === 'show' || boardModalStatus.value === 'hidden'
})


</script>

<style scoped>
:deep(.n-card__content:first-child) {
  padding: 0;

}


</style>